<blockquote class='quote-from-book'>	<p><span class='ic'>“</span>Anything from 45&nbsp;to 75&nbsp;characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line <span class='bracket'>(</span>counting both letters and spaces<span class='bracket'>)</span> is widely regarded as ideal. For multiple column work, a better average is 40&nbsp;to 50&nbsp;characters.”</p>
 </blockquote>
	<p>The <em>measure</em> is the number of characters in a single line of a column of text. <abbr title="HyperText Mark-up Language">HTML</abbr> doesn’t have a concept of columns per se, instead text is held within <em>boxes</em>. In <abbr title="Cascading Style Sheets">CSS</abbr> the width of a box is set using the <code>width</code> property with any unit of length, for&nbsp;example:</p>

<pre><code>#col1 {
  width: 400px;
}

#col2 {
  width: 50%;
}

#col3 {
  width:33em;
}</code></pre>

	<p>When typographers set the measure and text size for printed media, those dimensions are fixed and unchangeable in their physical manifestation. In this regard, the Web as viewed on-screen is fundamentally different to print because the medium is far more under the control of your readers. In particular, if your reader wishes to change the text size or the dimensions of the ‘page’, they can&nbsp;do.</p>

	<p>In the preceding example, column 1&nbsp;has a fixed width: it has been set to 400&nbsp;px wide.  With text rendering at 12&nbsp;px this would result in a measure of approximately 66&nbsp;characters per line. If your reader increases the text size to 16&nbsp;px then the measure reduces to 50&nbsp;characters per line. Thus when the text size is changed, so the measure&nbsp;changes.</p>

	<p>Column 2&nbsp;has a liquid width: it has been set to 50% wide. Assuming your reader is browsing with a window 1000&nbsp;px wide, the box would be rendered as 500&nbsp;px wide, resulting in a measure of about 83&nbsp;characters per line. A measure of 83&nbsp;may be a little too wide for your reader, but because the box is liquid, your reader could reduce their window size to 800&nbsp;px, thus narrowing the box to 400&nbsp;px and creating a more comfortable measure of 66&nbsp;characters per&nbsp;line.</p>

	<p>Column 3&nbsp;has an elastic width: it has been set to 33&nbsp;em wide. On average one character takes up 0.5&nbsp;em so this box will have a measure of 66&nbsp;characters per line. If your reader increases the text size, the width of box will increase accordingly and so the measure remains at 66&nbsp;regardless of the text&nbsp;size.</p>

	<p>From a typographical perspective, the most appropriate method is to set box width in ems <span class='bracket'>(</span>elastic layout<span class='bracket'>)</span> as it ensures the measure is always set to the typographer’s specification. Setting box width as a percentage <span class='bracket'>(</span>liquid layout<span class='bracket'>)</span> gives the typographer approximate control over measure but also allows the reader to adjust the layout to suit their comfort. This website has been designed with liquid layout to afford readers this&nbsp;control.</p>

	<p>Relinquishing such control makes some designers quake in their boots, but the beauty and advantage of the Web as a medium is that readers are able to adjust their reading environment to suit their own needs. This is a concept that should be acknowledged &#38; embraced, and built into website designs from the ground&nbsp;up.</p>
